<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./914.css">
</head>

<body>
    <header>
        <!-- 头部 -->
        <div class="top">
            <h1>学生管理系统</h1>
            <P>用了UI框架，就是很高级</P>
            <button type="button" class="btn btn-primary btn-lg">开始使用</button>
        </div>
    </header>
    <!-- 主要内容 -->
    <div class="container">
        <!-- 左侧学生列表 -->
        <div class="container_left">
            <div class="top">
                <p>学生列表</p>
            </div>
            <div class="center">
                <!-- 表单 -->
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <button type="button" class="btn btn-primary btn-sm" id="refresh">刷新</button>
                <ul class="pagination">
                </ul>
            </div>
        </div>
        <!-- 右侧功能 -->
        <div class=" container_right">
            <!-- 新增学生（上） -->
            <div class="top">
                <!-- 名字 -->
                <div class="top_top">
                    <p>新增学生</p>
                </div>
                <div class="top_center">
                    <!-- 功能 -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="学生姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="学生年龄" id="add_age">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <label for="male">男</label>
                                <input type="radio" name="gender1" id="male" value="男">
                                <label for="female">女</label>
                                <input type="radio" name="gender1" id="female" value="女">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" id="sure_add">确认新增</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!-- 修改学生（中） -->
            <div class="center">
                <div class="top_top">
                    <p>修改学生</p>
                </div>
                <div class="center_center">
                    <!-- 功能 -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="学生姓名" id="edit_name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" placeholder="学生年龄" id="edit_age">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10  male_2">
                                <label for="male_2">男</label>
                                <input type="radio" name="gender_2" id="male1_2" value="男">
                                <label for="female_2">女</label>
                                <input type="radio" name="gender_2" id="female_2" value="女">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" id="sure_delte">确认修改</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!-- 查询学生（下） -->
            <div class="bottom">
                <div class="top_top">
                    <p>查询学生</p>
                </div>
                <div class="bottom_center">
                    <div class="opt">
                        <select class="btn btn-default dropdown-toggle" id="student">
                            <option value="1">学号</option>
                            <option value="2" selected>姓名</option>
                            <option value="3">年龄</option>
                            <option value="4">性别</option>
                        </select>
                        <input type="text" class="form-control" placeholder="查询学生" id="find_one">
                        <button type="button" class="btn btn-default" id="findstudent">查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        const studentsData = [{
                id: 1,
                name: '汪印星',
                age: '24',
                gender: '男'
            },
            {
                id: 2,
                name: '李寅峰',
                age: '22',
                gender: '男'
            },
            {
                id: 3,
                name: '钟鑫茂',
                age: '22',
                gender: '女'
            },
            {
                id: 4,
                name: '张胜江',
                age: '24',
                gender: '男'
            },
            {
                id: 5,
                name: '徐阳',
                age: '25',
                gender: '男'
            },
            {
                id: 6,
                name: '杨烨',
                age: '26',
                gender: '男'
            },
            {
                id: 7,
                name: '杨恩',
                age: '25',
                gender: '女'
            },
            {
                id: 8,
                name: '夏琪琦',
                age: '22',
                gender: '女'
            },
            {
                id: 9,
                name: '罗雷',
                age: '26',
                gender: '男'
            },
            {
                id: 10,
                name: '陈阳吉',
                age: '22',
                gender: '男'
            }
        ];
        let table = document.querySelector('table');
        let tbody = document.querySelector('tbody');
        let input = document.querySelector('.form-control')
        let male = document.querySelector('.col-sm-offset-2');
        let add = document.querySelector('.btn-default');
        let male_2 = document.querySelector('.male_2');
        let select = document.querySelector('select');
        let gender_1 = document.getElementsByName('gender1');
        let gender_2 = document.getElementsByName('gender_2');
        console.log(gender_1);
        let daid;
        let objmale;
        let length = 0;

        // 学生列表
        render_2();


        //修改学生
        tbody.onclick = function (event) {
            if (event.target.value == '修改') {
                daid = event.target.dataset.id;
                edit_name.value = studentsData[daid - 1].name;
                edit_age.value = studentsData[daid - 1].age;
                console.log(studentsData[daid - 1].gender);
                if (studentsData[daid - 1].gender == '男') {
                    male1_2.checked = true;
                } else {
                    female_2.checked = true
                }
                sure_delte.onclick = function () {
                    let x = edit_name.value;
                    let y = edit_age.value;
                    studentsData[daid - 1].name = x;
                    studentsData[daid - 1].age = y;
                    let value = '';
                    for (let l = 0; l < gender_2.length; l++) {
                        if (gender_2[l].checked == true) {
                            objmale = gender_1[l].value
                        }
                    }
                    studentsData[daid - 1].gender = objmale
                    // console.log(studentsData);
                    tbody.innerHTML = studentsData.map(item => `<tr>
                                <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                                <td id="test">
                                <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                </td></tr>`).join('');
                    edit_name.value = '';
                    edit_age.value = '';
                    gender_2[0].checked = false;
                    gender_2[1].checked = false;
                }
            } else {
                //删除学生
                if (event.target.value == '删除') {
                    daid = event.target.dataset.id2;
                    let obj = event.target.dataset.id2;
                    let arr_delet = studentsData.filter(item => item.id == obj)[0];
                    let i = studentsData.indexOf(arr_delet)
                    console.log(i);
                    let r = confirm('是否删除');
                    if (r == true) {
                        studentsData.splice(i, 1);
                        console.log(studentsData);
                    }
                    tbody.innerHTML = studentsData.map(item => `<tr>
                                            <td>${item.id}</td><td>${length+=1}</td><td>${item.age}</td><td>${item.gender}</td> 
                                            <td id="test">
                                            <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                            <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                            </td></tr>`).join('');
                    render_2();

                }
            }
        }

        // 新增学生
        sure_add.onclick = function () {
            let tr = document.createElement('tr');
            let x = input.value;
            let y = add_age.value;
            let value = '';
            for (let g = 0; g < gender_1.length; g++) {
                if (gender_1[g].checked == true) {
                    objmale = gender_1[g].value
                }
            }
            let arr = [];
            if (x && y && objmale && gender_1[0].checked == true || gender_1[1].checked == true) {
                arr.push(studentsData.length + 1, x, y, objmale);
                // console.log(addarr);
                // console.log(arr);
                studentsData.push({
                    id: studentsData.length + 1,
                    name: `${x}`,
                    age: `${y}`,
                    gender: `${objmale}`

                })
                let addarr = arr.map(item => `<td>${item}</td>`).join('');
                addarr += ` <td id="test">
                                    <button type="button" class="btn btn-warning">修改</button>
                                    <button type="button" class="btn btn-danger">删除</button>
                                </td>`
                tr.innerHTML = addarr;
                tbody.appendChild(tr);
                input.value = '';
                add_age.value = '';
                gender_1[0].checked = false;
                gender_1[1].checked = false;
                render_2();
            } else {
                alert('请填写完整')
            }
            console.log(studentsData);

        }


        //查询学生
        let sv = 0;
        student.onblur = function () {
            sv = select.value;
            console.log(sv);
            findstudent.onclick = function () {
                let Numerical_value = find_one.value;
                console.log(Numerical_value, sv);
                switch (sv) {
                    case '1':
                        let result = studentsData.filter(item => item.id == studentsData[Numerical_value - 1]
                            .id);
                        tbody.innerHTML = result.map(item =>
                            `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');
                        break;
                    case '2':
                        let result_name = studentsData.filter(item => item.name == Numerical_value);
                        tbody.innerHTML = result_name.map(item =>
                            `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');
                        break;
                    case '3':
                        let result_age = studentsData.filter(item => item.age == Numerical_value);
                        tbody.innerHTML = result_age.map(item =>
                            `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');
                        break;
                    case '4':
                        let result_male = studentsData.filter(item => item.gender == '男');
                        let result_female = studentsData.filter(item => item.gender == '女');
                        tbody.innerHTML = result_male.map(item =>
                            `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');
                        tbody.innerHTML = result_female.map(item =>
                            `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');

                        console.log(result_male);
                        break;
                }
                find_one.value = '';
            }

        }

        //刷新
        refresh.onclick = function () {
            tbody.innerHTML = studentsData.map(item =>
                `<tr>
                        <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                        <td id="test">
                        <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                        <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                        </td>
                        </tr>`).join('');
        }




        //分页
        function render_2() {
            let arr_arr = Math.ceil(studentsData.length / 10);
            let ul = document.querySelector('ul');
            let arr_2 = '';
            for (let j = 1; j <= arr_arr; j++) {
                // console.log(j);
                if (j == 1) {
                    arr_2 += `<li><a href="#">&laquo;</a></li>`
                }
                arr_2 += `<li><a href="#">${j}</a></li>`
                if (j == arr_arr) {
                    arr_2 += `<li><a href="#" id="last">&raquo;</a></li>`
                }
            }
            ul.innerHTML = arr_2
            let number2 = studentsData.slice(0, 10);
            tbody.innerHTML = number2.map(item => `<tr>
                                    <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                                    <td id="test">
                                    <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                    <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                    </td></tr>`).join('');
            console.log(ul);
            ul.onclick = function (event) {
                let number = event.target.innerText;
                if (event.target.innerText == '«') {
                    if (number > 0) {
                        number2 = studentsData.slice((number - 1) * 10, number * 10);
                        tbody.innerHTML = number2.map(item => `<tr>
                                    <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                                    <td id="test">
                                    <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                    <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                    </td></tr>`).join('');
                    }
                }
                if (event.target.innerText == '»') {

                }
                if (event.target.nodeName == 'A') {

                }
            }
        }
    </script>
</body>

</html>